<template>
  <div class="fireOccupancy-box">
    <div class="pass-content">
      <p class="pass-name">消防通道占用情况</p>
      <!--消防通道占用地点分类-->
      <ul class="fireOccupancy-type">
        <li v-for="(item, i) in OccupancyData" :key="i" :style="{background: chooseColor(i)}">{{item.location}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'peoplePass',
  data () {
    return {
      OccupancyData: [ // 消防占用情况数据
        { location: '正门', condition: '低' },
        { location: '西门', condition: '低' },
        { location: '后门', condition: '中' },
        { location: '1号', condition: '低' },
        { location: '2号', condition: '低' },
        { location: '3号', condition: '高' },
        { location: '4号', condition: '低' },
        { location: '5号', condition: '低' }
      ]
    }
  },
  methods: {
    chooseColor (i) {
      var bColor = '#50E3C2'
      if (this.OccupancyData[i].condition === '中') {
        bColor = '#F8E71C'
      } else if (this.OccupancyData[i].condition === '高') {
        bColor = '#F5A623'
      }
      return bColor
    }
  }
}
</script>

<style scoped>
  .fireOccupancy-box {
    width: 100%;
    margin-bottom: 10px;
  }

  .pass-content {
    width: 100%;
    position: relative;
    background: rgba(43, 54, 72, 0.95);
    border-radius: 4px;
    padding: 20px;
    box-sizing: border-box;
  }

  .pass-name {
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
    float: left;
  }

  .fireOccupancy-type {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .fireOccupancy-type li {
    border-radius: 2px;
    width: 20%;
    margin: 0 5% 5% 0;
    font-size: 12px;
    /*background: #50E3C2;*/
    line-height: 20px;
    text-align: center;
  }
</style>
